<template>
	<nav-header :title="(titleObj[code] || '文章详情') + '(' + data.pageTotal + ')'">
    <view class="bg-white pt-4">
        <view class="flex-1">
          <u-search placeholder="搜索你想要查找的信息" v-model="searchVal" :clearable="true"
                    :custom-style="{backgroundColor: '#ffffff',paddingLeft: '12px',borderRadius: '36px'}"
                    @clear="reloadData()" @confirm="reloadData()" @search="reloadData()"/>
        </view>
    </view>


    <view class="px-4 bg-white" v-if="dictCode != ''">
      <u-tabs :list="tabList" :activeStyle="{color: '#333333',transform: 'scale(1.05)'}"
              :inactiveStyle="{ color: '#999999',transform: 'scale(1)'}"
              itemStyle="width: 25%;height: 44px;align: center;padding-left: 0px; padding-right: 0px;"
              lineWidth="0" @click="(item)=>{
					code = item.val
					reloadData()
				}"></u-tabs>
    </view>
    <my-page ref="mypage" v-model="articleList" :height="system.screenHeight - system.statusBarHeight" @load-data="loadData">
			<template slot="content">
				<view v-for="(item,index) in articleList" :key="index" class="bg-white mx-4 mt-4 p-4 rounded-lg"
					@click="handleSlideshowClick(item)">
					<view v-if="'military_style,park_dynamics_news,train_news'.indexOf(code) > -1">
						<view class="text-black-32 font-bold zx-multi-ellipsis--2" v-text="item.title"></view>
						<view class="text-gray-66 text-sm mt-2 flex justify-between">
							<view class="flex flex-col justify-between pr-2" :style="{width: item.image? 'calc(100% - 108px)':'100%'}">
								<view class="zx-multi-ellipsis--2" v-text="$util.html2Text(item.content)"></view>
								<view class="text-gray-99 text-sm" v-text="$util.getFormatDate(item.publishTime)"></view>
							</view>
							<image v-if="item.image" :src="$util.formatImageIdUrl(item.image)" class="rounded" style="width: 108px;height: 65px;" mode="aspectFill"></image>
						</view>
					</view>
					<view v-else-if="code == 'policy_adv'">
						<view class="text-black-32 text-lg font-bold zx-multi-ellipsis--2" v-text="item.title"></view>
						<view class="text-gray-66 text-sm mt-2_5 zx-multi-ellipsis--2" v-text="$util.html2Text(item.content)"></view>
						<view class="text-gray-99 text-sm mt-3" v-text="$util.getFormatDate(item.publishTime)"></view>
					</view>
					<view v-else-if="'charity_report,voluntary_activities'.indexOf(code) > -1">
						<view class="text-black-32 text-lg font-bold zx-multi-ellipsis--2"  v-text="item.title"></view>
						<view class="mt-2 text-gray-66 zx-multi-ellipsis--2" v-text="$util.html2Text(item.content)"></view>
						<view v-if="item.image" class="my-3">
							<image :src="$util.formatImageIdUrl(item.image)" class="rounded-lg w-1_2 h-24" mode="aspectFit"></image>
						</view>
						<view class="mt-2 text-gray-99 text-sm" v-text="$util.getFormatDate(item.publishTime)"></view>
					</view>
					<view v-else-if="code == 'policy_support'">
						<view class="text-black-32 font-bold text-base zx-multi-ellipsis--2"  v-text="item.title"></view>
						<image v-if="item.image" :src="$util.formatImageIdUrl(item.image)" class="rounded mt-4 w-full h-36" mode="aspectFill"
							@click.stop="showImg(item.image)"></image>
						<view v-else class="text-sm mt-4 text-gray-99" v-text="item.summary || ''"></view>
						<view class="flex justify-end mt-2 text-gray-99 text-sm">
							<!-- <view v-text="'国家发展和改革委员会'"></view> -->
							<view v-text="$util.getFormatDate(item.publishTime)"></view>
						</view>
					</view>
					<view v-else-if="code == 'finance_service'" class="flex items-center flex-no-wrap">
						<image :src="$util.formatImageIdUrl(item.image)" class="rounded" style="width: 35px;height: 35px;" mode="aspectFill"></image>
						<view class="pl-3 pr-2" style="width: calc(100% - 80px)">
							<view class="text-black-32 font-bold text-base zx-ellipsis"  v-text="item.title"></view>
							<view class="text-sm mt-2 text-gray-99 zx-ellipsis" v-text="item.summary || '暂无描述'"></view>
						</view>
						<u-icon name="arrow-right" color="#bfbfbf" size="20"></u-icon>
					</view>
					<view v-else class="flex justify-between items-center">
						<text class="text-black-33 zx-ellipsis" v-text="item.title"></text>
						<u-icon name="arrow-right" color="#bfbfbf" size="16"></u-icon>
					</view>
				</view>
			</template>
		</my-page>
	</nav-header>
</template>

<script>
	import {mapState} from 'vuex'
	import MyPage from '@/components/my_page.vue'
	import NavHeader from '@/components/nav_header.vue'
	import * as articleApi from '@/interface/junchuang/article.js'
  import * as systemApi from '@/interface/common/system.js'
  import MescrollPageMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-page.js"
	export default {
		mixins: [MescrollPageMixin],
		components: {
			NavHeader,MyPage
		},
		data() {
			return {
				code: '',
				title: '',
        tabList: [
          {name: '全部', val: ''},
        ],
        dictCode: '',
				type: '',
        searchVal:'',
				data: {pageTotal: 0},
				articleList: [],
				titleObj: {
					park_dynamics_news: '园区动态',
          find_policy: '找政策',
          find_policy_talent: '人才政策',
          find_policy_industry: '产业政策',
					policy_support: '创业政策',
					charity_report: '公益报告',
					prospective_analysis: '前景分析',
					team_service: '团队服务',
					voluntary_activities: '志愿新闻',
          demand_release: '需求发布',
					military_style: '园区风采'
				},
        topFnc: { //  quyu: {title: '区域',  val: '', text: '',isClick: false, dataList: [], fnc: function () {}},

        },
			}
		},
		computed: {
			...mapState({
				system: state => state.system
			})
		},
		onLoad(e) {
			this.code = e.code
			this.dictCode = e.dictCode
		},
		onPullDownRefresh () {
			this.$refs['mypage'].dataReload()
			uni.stopPullDownRefresh()
		},
    onShow() {
      this.$util.openShare();
      const v = this
      if(v.dictCode != undefined && v.dictCode != ''){
        v.tabList =  [{name: '全部', val: v.code},]
        v.tabList[0].val = v.code
        systemApi.getDictList(v.dictCode).then(({ data }) => {
          data.forEach(item=>{
            v.tabList.push({
              name: item.dictLabel,
              val: item.dictValue
            })
          })
        })
      }
    },
		methods: {
			loadData(page, success, error){
				const v = this;
				Object.assign(v.data, page, {
          title: v.searchVal,
					code: v.code
				})
				articleApi.getArticlePageList(v.data).then(res=>{
					v.data.pageTotal = res.data.total || 0
					success(res)
				}).catch(error)
			},
      reloadData() {
        this.$refs['mypage'].dataReload()
      },
			showImg (url) {
				this.$util.picPreview(0, [{url: this.$util.formatImageIdUrl(url)}])
			},
      // 根据类型跳转文章
      handleSlideshowClick(article) {
        const v = this
        if(article.type  == '0'){ // 文章
          v.$util.myNavigateTo('/pages/common/article_detail?code=' + article.code + '&id=' + article.id)
        }else if (article.type  == '1')  { // 文章链接
          v.$util.myNavigateTo('/pages/common/article_official_detail?code=' + article.code + '&id=' + article.id)
        }else { // 2 页面跳转
          v.$util.myNavigateTo(article.link)
        }

      }
		},

	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}
</style>
